[JavaScript] Select 태그의 값을 순서, Index로 찾기, selectedIndex

select 태그에서 선택된 값이 있는 경우 몇번째 해당하는지 값을 알려면 어떻게 알 수 있을까요? 아래 방법은 선택된 값을 얻는 자바스크립트 방법입니다.

# selectedIndex를 사용한 select 태그의 선택값 알아내기

select 태그에서 선택된 값의 위치 또는 순서 index를 알려면 selectedIndex 속성을 사용합니다. 이 속성은 선택된 태그의 index 넘버를 반환해줍니다. 간단한 사용 방법은 아래와 같이 사용합니다!

selectElement.selectedIndex;

참고로 선택된 <option> 태그에 적용된 값을 알려면 element.value 프로퍼티를 사용하여 그 값을 알 수 있죠. 하지만 index 값인 순서를 알아야한다면 selectedIndex를 사용합니다. 간단하게 선택된 값의 해당위치를(순서값) 불러옵니다. 그럼 아래 예제를 참고하세요.

# select 태그의 selectedIndex 예제보기

아래 select 태그가 값을 가지는 경우 이 값의 index, 위치를 얻는 예제입니다.
@ selectedIndex.html

이제 아래와 같이 스크립트를 사용하여 확인해봅시다.

위 스크립트를 실행하면 indexNo의 반환값으로 아래와 같이 콘솔에 출력됩니다.

참고로, 스크립트를 실행시키면 맨 위부터 (0, 1, 2, ...) 순서로 값을 가져옵니다. 시작값이 0부터 증가하게됩니다.

! 예제 동작해보기

길제로 아래의 select 태그에서 값을 선택해보세요! 해당 index값을 출력하게됩니다.